<template>
    <basic-container :btnFlag = true>
        <div class="card-border">
            <div class="step-group">
                <el-steps :active="1">
                    <el-step title="申请" icon="el-icon-edit" ></el-step>
                    <el-step title="初审" icon="el-icon-upload" ></el-step>
                    <el-step title="审核" icon="el-icon-edit" class="transform-deg"></el-step>
                    <el-step title="" icon="el-icon-edit" class="transform-deg_line"></el-step>
                    <el-step title="赋码反馈(一般类、备案类)" icon="el-icon-upload" class="step-record"></el-step>
                    <el-step title="清单报批" icon="el-icon-upload" class="step-list-report"></el-step>
                    <el-step title="政府批复" icon="el-icon-picture" class="step-approval"></el-step>
                    <el-step title="赋码反馈" icon="el-icon-upload" class="step-coding"></el-step>
                </el-steps>
            </div>
            <card-header :header-data="headerData"></card-header>

            <div class="main-form">
                <activiti-action :footerButtonContrl="false" :task-id="taskId" @sendAction="sendAction" ref="action" v-model="form">
                    <template slot="formFooter">
                        <el-form :model="form"
                                 :rules="formRules"
                                 label-position="left"
                                 ref="extendForm"
                                 v-if="categoryControl">
                            <el-form-item label="规划类型:" prop="category">
                                <el-select v-model="form.category" placeholder="请选择规划类型">
                                    <el-option
                                            v-for="item in categoryDic"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="categoryHasChange" label="规划类型修改原因" prop="categoryModifyRemark">
                                <el-input type="textarea" :rows="5" v-model="form.categoryModifyRemark">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                    <template slot="footerCenter">
                        <el-button type="primary" @click="submitConfirm()">确认</el-button>
                        <el-button type="info" @click.stop="goBack()">关闭</el-button>
                    </template>
                    <!--<template slot="headerRight">-->
                        <!--<el-button type="primary" @click="startConsult">发起会商</el-button>-->
                        <!--<el-button type="primary" @click="consultList">查看会商</el-button>-->
                    <!--</template>-->
                  <template slot="buttonRight">
                    <topic-relate-btn :task-id="taskId"
                                      :business-id="registerinfoId"
                                      type="A">
                    </topic-relate-btn>
                  </template>
                </activiti-action>
            </div>

          <el-tabs class="bs-tab" v-model="activeName"
                   type="card">
            <el-tab-pane v-if="registerinfoId != null" label="申请信息"
                         name="first">
              <register-detail class="register-detail"
                               :id="registerinfoId"/>
            </el-tab-pane>
            <el-tab-pane v-if="listId != null" label="报批信息"
                         name="first">
              <bostech-detail v-if="listDetail != null && listDetail.length > 0" :detail-data="listDetail"/>
              <list-register-info v-if="listId != null" :listId="listId"/>
            </el-tab-pane>
            <el-tab-pane label="办理过程"
                         name="second">
              <process-handle-history :task-id="taskId"/>
            </el-tab-pane>
          </el-tabs>

            <!--<el-collapse v-model="activeNames" style="margin-top:2rem;">-->
                <!--<el-collapse-item name="1">-->
                    <!--<template slot="title">-->
                        <!--<div class="card-header collapse-header">-->
                            <!--<div class="head-title collapse-title">申请信息</div>-->
                            <!--<div class="head-explain">-->
                                <!--操作说明-->
                                <!--<i class="el-icon-question"></i>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</template>-->
                    <!--<register-detail class="register-detail" :id="$route.query.registerinfoId"></register-detail>-->
                <!--</el-collapse-item>-->
            <!--</el-collapse>-->
        </div>
        <el-dialog title="该规划立项是否需要征求相关部门意见？" :visible.sync="discussionVisible">
            <div class="form-group">
                <span class="form-label">是否发起会商:</span>
                <el-radio-group v-model="form.discussionFlag" size="mini">
                    <el-radio label="1" border>发起会商</el-radio>
                    <el-radio label="0" border>不发起会商</el-radio>
                </el-radio-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="this.discussionVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </basic-container>
</template>
<script>

    import {projectDetail,firstTrialFor} from "@/api/planning/project";
    import {PROJECT_DIC} from '@/const/dict'
    import registerDetail from "@/components/registerinfo/registerDetail"
    import activitiAction from "@/components/activiti/action"
    import topicRelateBtn from "@/components/activiti/topic-relate-button/topicRelateBtn";

    import processHandleHistory from "@/components/activiti/history/processHandleHistory";

    export default {
        name: "firstTrialFor",
        components: {
            registerDetail,
            activitiAction,
            topicRelateBtn,
            processHandleHistory
        },
        data() {
            const getApplyForCategoryDic = _ => {
                let applyForCategoryDic = PROJECT_DIC.CATEGORY.filter(
                    item => item.value != 'A'
                );
                return applyForCategoryDic
            };
            return {
                headerData: {
                    title: "初审"
                },
                activeNames: ["1"],
                activeName: 'first',
                categoryDic: getApplyForCategoryDic(),
                //任务ID
                taskId: null,
                //表单
                form: {
                    category: null
                },
                //表单验证
                formRules: {
                    category: [
                        {required: true, message: '请输入规划类型', trigger: 'blur'}
                    ]
                },
                //原始规划类型
                categoryOriginal: null,
                discussionVisible: false,//是否发起会商弹框
                discussionFlag: '0',//是否发起会商标志
                registerinfoId: null,
                categoryControl:true
            };
        },
        created() {
            this.taskId = this.$route.params.id;
            this.registerinfoId = this.$route.query.registerinfoId
            this.getDetailData();
        },
        watch: {

        },
        computed:{
            categoryHasChange(){
                let categoryHasChange = this.categoryOriginal != null && this.form.category != this.categoryOriginal;
                if(categoryHasChange){
                    this.formRules = Object.assign({}, this.formRules,
                        {
                            'categoryModifyRemark':[{
                                required: true,
                                message: '请输入规划类型修改原因',
                                trigger: 'blur'
                            }]
                        }
                    );
                }
                return categoryHasChange;
            },
        },
        methods: {
            goBack() {
                this.$router.go(-1);
            },
            getDetailData(){
                projectDetail(this.$route.query.registerinfoId).then(response => {
                    let records = response.data.data;
                    this.form.category = records.category;
                    this.categoryOriginal = records.category;
                })
            },
            submitConfirm(){
                //验证动作表单
                if(this.categoryControl){
                  this.$refs.action.validateForm(() => {
                    //验证初审表单
                    this.validateForm(() => {
                      this.$confirm("是否确定提交?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                      }).then(() => {
                        this.submit()
                      });
                    });
                  },()=>{
                    this.validateForm();
                  });
                }else {
                  this.submit()
                }

            },
            validateForm(successFunc, errorFunc) {
                 this.$refs.extendForm.validate((valid, object) => {
                   if (valid) {
                     if (successFunc != null) {
                       successFunc();
                     }
                   } else {
                     if (errorFunc != null) {
                       errorFunc(object);
                     }
                   }
                 });
            },
            submit(){
                let params = this.form;
                if(this.categoryHasChange){
                    let modifyList = [
                        {
                            "propertyName": "category",
                            "remark": this.form.categoryModifyRemark
                        }
                    ];
                    params.modifyList = modifyList;
                }
                firstTrialFor(this.taskId, params).then(response => {
                    if (response.data.code == 0) {
                        this.$notify({
                            title: '成功',
                            message: '初审成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$router.go(-1);
                    }
                });
            },
            // 发起会商跳转
            startConsult() {
                let src =`/startConsult/detail/${this.taskId}`;
                this.$router.push({
                    path: src,
                    query: {
                        registerinfoId: this.$route.query.registerinfoId
                    }
                });
            },
            // 查看会商跳转
            consultList() {
                var type = {
                    type:'A'
                };
                let src =`/consultList/detail/${this.$route.query.registerinfoId}`;
                this.$router.push({
                    path: src,
                    query:type
                });
            },
            sendAction(action){
                if(action.name=='退回修改'&&action.value=='disagree'){
                  this.categoryControl = false
                }else {
                  this.categoryControl = true
                }
            },
        }
    };
</script>

<style lang="scss" scoped>

    /*流程图样式*/
    .card-border{
        padding: 50px 10px;
        border: 1px solid #d2d2d2;
        .step-group {
            margin: 4rem 0 1px;
            .transform-deg{
                .el-step__line {
                    transform: rotate(-14deg);
                    margin-top: -17px;
                }
            }
            .transform-deg_line {
                margin-left: -145px;
                .el-step__line{
                    transform: rotate(16deg);
                    margin-top: 17px;
                }
            }
            /deep/.step-record{
                margin-top: -50px;
                margin-left: 24px;
                .el-step__title{
                    width: 200px;
                }
                .el-step__line{
                    display: none;
                }
            }
            .step-list-report{
                margin-top: 35px;
                margin-left: -200px;
            }
            .step-approval{
                margin-top: 35px;
            }
            .step-coding{
                margin-top: 35px;
            }
        }
    }

    .main-form{
        margin: 20px 10px;
    }
    .register-detail{
        margin: 20px 10px;
    }
</style>
